<template>
  <div id="RealTime">
    <div class="header-time">
      <div>{{ nowTime }}</div>
      <div>{{ nowWeek }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RealTime',
  data () {
    return {
      nowTime: '',
      week:'',
      nowWeek:'',
    }
  },
  created(){
    this.timeFormate(new Date());
    // 是否随时改变时间
    setInterval(this.nowTimes,1000);
  },
  methods: {
    timeFormate(timeStamp) {
      let year = new Date(timeStamp).getFullYear();
      let month =new Date(timeStamp).getMonth() + 1 < 10? "0" + (new Date(timeStamp).getMonth() + 1): new Date(timeStamp).getMonth() + 1;
      let date =new Date(timeStamp).getDate() < 10? "0" + new Date(timeStamp).getDate(): new Date(timeStamp).getDate();
      let hh =new Date(timeStamp).getHours() < 10? "0" + new Date(timeStamp).getHours(): new Date(timeStamp).getHours();
      let mm =new Date(timeStamp).getMinutes() < 10? "0" + new Date(timeStamp).getMinutes(): new Date(timeStamp).getMinutes();
      let ss =new Date(timeStamp).getSeconds() < 10? "0" + new Date(timeStamp).getSeconds(): new Date(timeStamp).getSeconds();
      let week = new Date(timeStamp).getDay();
      let weeks = ["日","一","二","三","四","五","六"];
      let getWeek = "星期" + weeks[week];
      // this.nowTime = year + "-" + month + "-" + date +" "+hh+":"+mm;
      this.week=getWeek
      this.nowTime = year + "年" + month + "月" + date + "日";
      this.nowWeek =getWeek + " " + hh+":"+mm+':'+ss
      year,month,date,hh,mm,ss,week,weeks,getWeek = null
    },
    nowTimes(){
      this.timeFormate(new Date());
      this.clear()
    },
    clear(){
      clearInterval(this.nowTimes)
      this.nowTimes = null;
    },
  },
}
</script>

<style scoped>

  /* #RealTime {

  } */
  .header-time{
    font-size: 28px;
    color: #000000;
    text-align: center;
    font-family: "黑体";
    width: 280px;
  }

  .header-time div{
    text-align: center;
  }
  .week{
    display: inline-block;
    margin-left: 30px;
    width: 72px;
    height: 33px;
    font-size: 24px;
    font-weight: 500;
    color: #000000;
    line-height: 33px;
  }
</style>
